<template>
      <el-container id="container">
          <el-header style="height: 80px">
              <el-row :gutter="20" style="width:100%;height:80px">
                  <el-col :span="6" style="height: 80px">
                    <div class="header_left" style="height: 80px;line-height: 60px;padding-left: 25%">
                         当前时间:{{currentTime}}
                    </div>
                  </el-col>
                <el-col :span="12" style="height: 80px">
                     <div id="header_center" style="height: 80px;margin-top: 10px">
                    {{title}}
                     </div>
                </el-col>
                <el-col :span="6" style="height: 80px">
                  <div class="header_left" style="height: 80px;padding-left: 25%;margin-top: 10px">
                    <el-row>
                       <el-col :span="3">
                         <el-image  @click.native="firstPage"  style="height: 30px;width: 30px;margin-top: 5px;cursor: pointer" src="http://10.20.3.63:9163/image/image1675128066493.png"></el-image>
                       </el-col>
                      <el-col :span="20">
                        当前位置: <el-button style="color: white;background-color:#061431; border: 1px solid #1A6288;"   type="primary">{{current_postion}}</el-button>
                      </el-col>

                    </el-row>

                  </div>
                </el-col>
              </el-row>
          </el-header>
             <el-main style="height: 100%;width: 100%;padding: 0">
               <router-view></router-view>
             </el-main>

      </el-container>
</template>
<script>
  import { parseTime } from '../../utils/entfrm'

  export default {
    data() {
      return {
        current_postion:"BI报表首页",
        currentTime:"",
        intervalId3:"",
        title:"民祥化工科技BI报表系统",
      }
    },
    methods:{
      formatTime(date) {
        return parseTime( new Date().getTime() ,'{y}-{m}-{d} ')+ date.toLocaleTimeString();
      },
      updateTime() {
        this.currentTime = this.formatTime(new Date());
      },

      firstPage(){
        this.$router.push("/birRepport/index?biName=BI报表首页");
      },


//     shuijingtu(){
//       const chart = echarts.init(document.getElementById('chart-container'));
//
//       var dataList = [
//         { name: '系列一', value: 73, max: 100 },
//         { name: '系列二', value: 18, max: 100 },
//         { name: '系列三', value: 43, max: 100 },
//         { name: '系列四', value: 28, max: 100 },
//       ];
//       var colorList1 = ['rgba(38, 138, 255, 0.9)', 'rgba(30, 214, 255, 0.9)', 'rgba(61, 255, 220, 0.9)', 'rgba(54, 240, 151, 0.9)']
//       var colorList2 = ['#1A60B1', '#1691B3', '#2AAB9C', '#25A270']
//       var colorList3 = ['#268AFF', '#1ED6FF', '#3DFFDC', '#36F097']
//       var colorList4 = ['rgba(38, 138, 255, 0.2)', 'rgba(30, 214, 255, 0.2)', 'rgba(61, 255, 220, 0.2)', 'rgba(54, 240, 151, 0.2)']
//
//
// // 头部数据
//       let topData = dataList.map((item, index) => {
//         return {
//           name: '',
//           value: item.max,
//           symbolPosition: 'end',
//           itemStyle: {
//             color: colorList1[index]
//           },
//         };
//       });
// // 底部立体柱子
//       let bottomBar = dataList.map((item, index) => {
//         return {
//           value: item.value,
//           itemStyle: {
//             normal: {
//               color: {
//                 x: 0,
//                 y: 0,
//                 x2: 0,
//                 y2: 1,
//                 type: 'linear',
//                 global: false,
//                 // color:colorList2[index]
//                 colorStops: [
//                   {
//                     //第一节下面
//                     offset: 0,
//                     color: colorList2[index]
//                   },
//                   {
//                     offset: 1,
//                     color: colorList2[index]
//                   }
//                 ]
//               }
//             }
//           }
//
//         };
//       });
// // 底下圆片
//       let bottomCircle = dataList.map((item, index) => {
//         return {
//           name: '', value: item.max,
//           itemStyle: {
//             color: colorList3[index]
//           },
//         };
//       });
// // 中间圆片
//       let middleCircle = dataList.map((item, index) => {
//         return {
//           name: '', value: item.value, symbolPosition: 'end',
//           itemStyle: {
//             color: colorList3[index]
//           },
//         };
//       });
// // 上边的柱子
//       let upBar = dataList.map((item, index) => {
//         return {
//           name: item.name, value: item.max - item.value,
//           itemStyle: {
//             color: colorList4[index]
//           }
//         };
//       });
//
//      let option = {
//         backgroundColor: '#333333',
//         tooltip: {
//           trigger: 'item',
//           backgroundColor: 'rgba(0,0,0,0.5)',
//           borderColor: 'rgba(89,211,255,1)',
//           borderWidth: 2,
//           padding: 5,
//           textStyle: {
//             color: 'rgba(89,211,255,1)',
//             fontSize: 18,
//             width: 300,
//             height: 40
//           },
//           formatter: '{c}' + '%',
//           extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
//           // 自定义的 CSS 样式
//         },
//         grid: {
//           bottom: '10%',
//           top: '35%',
//           right: '0%',
//           left: '0%'
//         },
//         xAxis: {
//           data: ['系列一', '系列二', '系列三', '系列四', '系列五'],
//           axisTick: {
//             show: false
//           },
//           axisLine: {
//             show: false
//           },
//           axisLabel: {
//             show: true,
//             textStyle: {
//               color: 'rgba(255,255,255,0.5)'
//             },
//             margin: 30 //刻度标签与轴线之间的距离。
//           }
//         },
//         yAxis: {
//           splitLine: {
//             show: false
//           },
//           axisTick: {
//             show: false
//           },
//           axisLine: {
//             show: false
//           },
//           axisLabel: {
//             show: false
//           }
//         },
//         series: [
//           // 头
//           {
//             name: '',
//             type: 'pictorialBar',
//             symbolSize: [120, 45],
//             symbolOffset: [0, -20],
//             z: 12,
//             data: topData
//           },
//           //底部立体柱
//           {
//             stack: '1',
//             type: 'bar',
//             silent: true,
//             barWidth: 120,
//             data: bottomBar,
//
//           },
//           //最底下的圆片
//           {
//             name: '',
//             type: 'pictorialBar',
//             symbolSize: [120, 30],
//             symbolOffset: [0, 16],
//             z: 12,
//
//             data: bottomCircle
//           },
//           // 中间圆片
//           {
//             name: '',
//             type: 'pictorialBar',
//             symbolSize: [120, 42],
//             symbolOffset: [0, -20],
//
//             z: 12,
//             data: middleCircle
//           },
//           //上部立体柱
//           {
//             //上部立体柱
//             stack: '1',
//             type: 'bar',
//             label: {
//               show: true,
//               position: 'top', //top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
//               distance: 30,
//               color: 'rgba(255,255,255,0.5)',
//               fontSize: 20,
//               formatter: function (item) {
//                 var a = 100;
//                 return a - item.value + '%';
//               }
//             },
//             silent: true,
//             barWidth: 120,
//             //barGap: '-100%', // Make series be overlap
//             data: upBar,
//             z: 10,
//           }
//         ]
//       };
// // 设置配置项并渲染图表
//       chart.setOption(option);
//     }
    },
    mounted() {
       this.intervalId3=  setInterval(this.updateTime, 1000);
       // this.shuijingtu();
    },
    beforeDestroy() {
        clearInterval(this.intervalId3);
    },
    watch: {
      '$route.query': {
        handler(newQuery, oldQuery) {
          // 这里可以写你的逻辑来处理查询参数的变化
          this.current_postion=newQuery.biName;
        },
        deep: true, // 设置为 true 以深度监听对象内部的变化
        immediate: true // 组件创建时立即以当前 query 的值触发一次 handler
      }
    }
  }
</script>

<style >
   #container{
     background: url("../../assets/bi/imgs/bk_all.png") no-repeat;
     background-size: cover;
     color: #ffffff;
     position: relative;
     width: 100%;
     height: 100%;
   }

   .el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next, .el-pagination.is-background .el-pager li{
     background: #061431;
     border: 1px solid #1A6288;
     color:white;
     height: 40px;
     width:40px;
     line-height: 40px;
     border-radius: 5px;
   }
   .warp1{
     height: 400px;
     width: 100%;
     margin: 0 auto;
     overflow: hidden;
   ul {
     list-style: none;
     padding: 0;
     margin: 0 auto;
   li,
   a {
     display: block;
     height: 30px;
     line-height: 30px;
     display: flex;
     justify-content: space-between;
     font-size: 15px;
   }
   }
   }
  #header_center{
    background: url("../../assets/bi/imgs/head.gif") no-repeat center center;
    background-size: 100%;
    padding-left: 35%;
    font-size: 20px;
    font-weight: bold;
  }
  .header_left{
    background: url("../../assets/bi/imgs/header.png") no-repeat center center;
    background-size: 100%;
  }
  .panal{
          width: 100%;
          height: 100%;
         background: url("../../assets/bi/imgs/panel.png") no-repeat center;
         background-size: 100% 100%;
  }
   .panel-group {

   .card-panel-col {
     margin-bottom: 32px;
   }

   .card-panel {
     height: 80px;
     cursor: pointer;
     font-size: 4px;
     position: relative;
     overflow: hidden;
     color: #FFF;
     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     border-radius: 5px;
     border:3px solid #217093;
   &:hover {

    }




   }
   }
   .el-button--primary{
     background-color: #061431;
     border: 1px solid #1A6288;
   }


   .el-radio-button__inner{
     background-color: #061431;
     border: 1px solid #1A6288;
     width: 120px;
     height: 40px;
     color: white;
     margin-top: 10px;
     margin-left: 10px;
   }
   .el-input--medium .el-input__inner{
     background-color: #061431;
     border: 1px solid #1A6288;
     color: white;
   }
   .el-picker-panel{
     background:#061431;
     color: white;
   }
   el-picker-panel__icon-btn{
     background:#061431;
   }

    .el-radio-button:first-child .el-radio-button__inner{
      border-left: none;
    }
   .el-dialog__header{
     border-bottom: 1px solid #1A6288;
   }
   .el-dialog__body{
     background-color: #00234A;
   }
   .el-dialog__footer{
     background-color: #00234A;
   }

   .el-pagination__total{
     color:white;
     margin-top: 10px;
   }
   .el-message-box{
     background-color: #00234A;
   }
   .el-message-box__title{
     color:white;
   }
   /*修改头部的样式*/
   .el-table .el-table__header-wrapper tr th{
     background-color: #061431 !important;
     /*background: none;*/
     color: white;
     text-align: center;

   }
   /*修改每行的样式*/
   .el-table .el-table__row{
     /*background-color: #061431;*/
     color: #D2C172;
     text-align: center;
     background-color: transparent  ;
   }
   .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell{
     border-bottom:  1px solid #4e73ac;
   }
   .el-table--border .el-table__cell{
     border-right:  1px solid #4e73ac;
   }

   .el-table .el-table__body tr.current-row > td {
     background-color: #00347A !important;
     text-align: center;
     cursor: pointer;
   }

   .el-table .el-table__body tr:hover > td {
     background-color: #00347A !important;
     text-align: center;
     cursor: pointer;
     text-align: center;
   }




   /*修改表格每行边框的样式：*/
   .el-table td,
   .el-table th.is-leaf{
     border-bottom: 1px solid #4e73ac;
     border-right:1px solid #4e73ac;
     text-align: center;
   }
   /*!*设置表格每行的高度：*!*/
   .el-table__header tr,
   .el-table__header th{
     height: 40px;
     padding: 0;
     text-align: center;
   }
   .el-table__body tr,
   .el-table__body td {
     height: 40px;
     padding: 0;
     text-align: center;
     text-align: center;
   }
   .el-table td, .el-table th.is-leaf{
     background-color: #061431;
     color: white;
     text-align: center;
   }

   .el-table{
     border: 1px solid #4e73ac;
     text-align: center;
     height: 100%;
     /*background-color: #061431;*/
     background: none;
     text-align: center;
     overflow: auto;
   }
   .el-table--border::after, .el-table--group::after{
     width: 0;
   }
   .el-table::before{
     height: 0;
   }
   .el-form--inline .el-form-item__label{
     color:white;
   }
   el-form-item__content{
     background-color: #061431;
   }
   .el-input__inner {
         background-color: #061431;
         border:none ;
         height: 32px;
         font-size: 12px;
         color: #fff;
       }
   .el-input.is-disabled .el-input__inner{
     background-color: #061431;
     height: 32px;
     font-size: 12px;
     color: #fff;
   }
   .el-input{
     border: 1px solid #1A6288;
     width: 180px;
   }
   .el-range-editor .el-range-input{
     background: none;
     color: #fff;
     font-size: 12px;
   }
   .el-range-editor.el-input__inner{
     border: 1px solid #4e73ac ;
   }
   .el-date-editor .el-range-separator{
     color:  #fff;
   }
   .el-step__head.is-finish{
     color:#D2C172;
     border-color:#D2C172;
   }
   .el-step__title.is-finish{
     color:#D2C172;
   }
   .text-ellipsis {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .el-tree{
     background: none;
   }
   .el-tree-node.is-current>.el-tree-node__content{
     background:none;
   }
   .el-tree-node__content:hover{
     background: none;
     color:white
   }
   .el-tree-node__label{
     color: white;
   }
   .el-tree-node__expand-icon{
     color:white;
     font-size: 20px;
   }
   .el-tree{
     background: none;
   }
   .el-form-item__label{
     color:white;
   }
   .el-input--medium .el-input__inner{
     border: none;
   }
   .el-date-table td.in-range div:hover{background-color:black}
   .el-date-table td.in-range div{background-color:black}
   .el-tree-node__expand-icon{}
   /*

    */
</style>

